<template>
  <label 
    :class="labelClasses"
    :for="id"
  >
    <input
      :id="id"
      type="checkbox"
      :checked="modelValue"
      :disabled="disabled"
      class="sr-only peer"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
    />
    
    <!-- 自定义复选框样式 -->
    <div 
      :class="checkboxClasses"
      class="relative flex items-center justify-center transition-all duration-normal"
    >
      <!-- 外框 -->
      <div 
        :class="outerBoxClasses"
        class="w-4 h-4 rounded border-2 transition-all duration-normal"
      ></div>
      
      <!-- 勾选图标（选中状态） -->
      <svg 
        :class="checkIconClasses"
        class="absolute w-3 h-3 transition-all duration-normal scale-0"
        fill="none" 
        stroke="currentColor" 
        stroke-width="2" 
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
      </svg>
    </div>
    
    <!-- 标签文本 -->
    <span 
      :class="textClasses"
      class="ml-2 select-none"
    >
      <slot />
    </span>
  </label>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

interface Props {
  modelValue?: boolean
  disabled?: boolean
  size?: 'sm' | 'md' | 'lg'
  variant?: 'primary' | 'secondary' | 'ai' | 'fictional'
  indeterminate?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  disabled: false,
  size: 'md',
  variant: 'primary',
  indeterminate: false
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  change: [value: boolean]
}>()

// 交互状态
const isFocused = ref(false)

// 生成唯一ID
const id = computed(() => `checkbox-${Math.random().toString(36).substr(2, 9)}`)

// 标签样式类
const labelClasses = computed(() => {
  const baseClasses = 'inline-flex items-center cursor-pointer transition-all duration-normal'
  const disabledClasses = props.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-80'
  
  return [baseClasses, disabledClasses].join(' ')
})

// 复选框容器样式类
const checkboxClasses = computed(() => {
  const sizeClasses = {
    sm: 'w-4 h-4',
    md: 'w-5 h-5',
    lg: 'w-6 h-6'
  }
  
  return sizeClasses[props.size]
})

// 外框样式类
const outerBoxClasses = computed(() => {
  const baseClasses = 'transition-all duration-normal'
  const checkedClasses = props.modelValue || props.indeterminate
    ? 'border-primary-500 bg-primary-500' 
    : 'border-background-600 bg-transparent'
  const focusClasses = isFocused.value ? 'ring-2 ring-primary-500/20 ring-offset-2 ring-offset-background-900' : ''
  const disabledClasses = props.disabled ? 'opacity-50' : ''
  
  return [baseClasses, checkedClasses, focusClasses, disabledClasses].join(' ')
})

// 勾选图标样式类
const checkIconClasses = computed(() => {
  const baseClasses = 'transition-all duration-normal text-white'
  const checkedClasses = props.modelValue || props.indeterminate ? 'scale-100' : 'scale-0'
  
  return [baseClasses, checkedClasses].join(' ')
})

// 文本样式类
const textClasses = computed(() => {
  const baseClasses = 'text-sm font-medium transition-colors duration-normal'
  const colorClasses = props.disabled 
    ? 'text-text-muted' 
    : 'text-text-primary'
  
  return [baseClasses, colorClasses].join(' ')
})

// 事件处理
const handleChange = () => {
  if (!props.disabled) {
    const newValue = !props.modelValue
    emit('update:modelValue', newValue)
    emit('change', newValue)
  }
}

const handleFocus = () => {
  if (!props.disabled) {
    isFocused.value = true
  }
}

const handleBlur = () => {
  isFocused.value = false
}
</script>
